import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet, ImageBackground, Image, PixelRatio, } from 'react-native';
import Button from '../../components/Button';
// import CheckBox from 'react-native-check-box';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: true,
      username: '',
      password: '',
    };
  }

  onClick = () => {
    this.setState({ isChecked: !this.state.isChecked });
  };

  render() {
    return (
      <ImageBackground source={{ uri: 'back_ground' }} style={styles.backgroundStyle}>
        <View style={styles.view}>
          <View style={styles.logoView}>
            <Image style={styles.logoImage} source={{ uri: 'logo' }}/>
            <View style={styles.rowView}>
              <Text style={styles.logoText}>平安施工</Text>
              <Text style={styles.logoText}>智慧工程</Text>
            </View>
          </View>
          <View style={styles.editGroup}>
            <View style={styles.username}>
              <TextInput
                style={styles.edit}
                placeholder="请输入用户名"
                placeholderTextColor="#fff"
                onChangeText={(username) => this.setState({ username })}
              />
            </View>
            <View style={{ height: 1 / PixelRatio.get(), backgroundColor: '#c4c4c4' }}/>
            <View style={styles.password}>
              <TextInput
                style={styles.edit}
                placeholder="请输入密码"
                placeholderTextColor="#fff"
                secureTextEntry={true}
                onChangeText={(password) => this.setState({ password })}
              />
            </View>
            {/*<View style={styles.holdPassword}>*/}
            {/*<CheckBox*/}
            {/*style={{flex: 1, padding: 10}}*/}
            {/*onClick={()=>this.onClick()}*/}
            {/*isChecked={this.state.isChecked}*/}
            {/*rightText="记住密码"*/}
            {/*rightTextStyle={{color:'white'}}*/}
            {/*/>*/}
            {/*</View>*/}

            <View style={{ marginTop: 10 }}>
              <Button text="登录" onPress={this._handleClick.bind(this)}/>
            </View>
          </View>

        </View>

      </ImageBackground>
    );
  }

  _handleClick() {
    console.log(this.state);
    if (this.state.username === 'Admin' && this.state.password === 'admin') {
      const user = {
        username: this.state.username,
        password: this.state.password
      };
      this.props.afterLogin(user);
    }
  }

}

const styles = StyleSheet.create({
  backgroundStyle: {
    flex: 1,
    width: null,
    height: null
  },
  rowView: {
    flexDirection: 'row',
    justifyContent: "space-between",
    backgroundColor: 'transparent'
  },
  logoText: {
    top: -25,
    fontSize: 16,
    color: 'white',
    fontWeight: '700',
    marginLeft: 10,
    marginRight: 10
  },
  logoView: {
    marginTop: 50,
    flexDirection: 'column',
    alignItems: 'center'
  },
  logoImage: {

    width: 171,
    height: 171,
    resizeMode: 'center'
  },
  view: {
    flex: 1
  },
  editGroup: {
    marginLeft: 50,
    marginRight: 50
  },
  username: {
    marginTop: 10,
    height: 48,
    justifyContent: 'center',
    borderBottomWidth: 1,
    borderBottomColor: 'white'
  },
  password: {
    marginTop: 10,
    height: 48,
    justifyContent: 'center',
    borderBottomWidth: 1,
    borderBottomColor: 'white'
  },
  holdPassword: {},
  edit: {
    height: 40,
    fontSize: 13,
    paddingLeft: 15,
    paddingRight: 15,
  },
});